<template>
	<view>
		<!-- 头部导航 -->
		<scroll-view scroll-x scroll-with-animation class="tabbars" :scroll-into-view="scrollInfo">
			<view class="flex justify-between align-center py-1">
				<view class="flex flex-1 align-center justify-center" v-for="(item, index) in tabbars" :key="index">
					<view class="scroll-row" :id="'tab'+index" @tap="changeTab(index)"
					 :class="tabIndex === index ? 'text-danger' : 'font'">{{ item }}</view>
				</view>
			</view>
		</scroll-view>
		<!-- 下面列表 -->
		<swiper :duration="200" :current="tabIndex" @change="onChangeTab" :style="'height:' + swiperHeight + 'px;'">
			<swiper-item>
				<scroll-view scroll-y :style="'height: '+ swiperHeight +'px;'" @scrolltolower="loadMoreTask">
					<view class="font-lg px-3 py-2 flex justify-between align-center" 
					 v-for="(item, index) in needList" @tap="openDetail()"
					 :key="index">
						<text>{{ item.name }}</text>
						<text>{{ item.gender }}</text>
						<text>{{ item.birth }}</text>
						<text class="px-3 py-1 rounded-circle bg-pink text-white font-md">办理</text>
					</view>
					<uni-load-more :status="needLoadMoreStatus"></uni-load-more>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y scroll-with-animation :style="'height: '+ swiperHeight +'px;'">
					<view class="font-lg px-3 py-2 flex justify-between align-center" 
					 v-for="(item, index) in completeList"
					 :key="index">
						<text>{{ item.name }}</text>
						<text>{{ item.gender }}</text>
						<text>{{ item.birth }}</text>
						<text class="px-3 py-1 rounded-circle bg-pink text-white font-md">查看</text>
					</view>
					<uni-load-more :status="completeLoadMoreStatus"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni/uni-load-more/uni-load-more.vue'
	
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				tabbars: ["待办任务", "已办任务"],
				tabIndex: 0, // 当前显示面板
				scrollInfo: "",
				swiperHeight: 0,
				needLoadMoreStatus: 'more',
				// 待办任务列表
				needList: [
					{
						name: "张启山",
						gender: "男",
						birth: '1990-09-01'
					},
					{
						name: "张启山",
						gender: "男",
						birth: '1990-09-01'
					},
					{
						name: "张启山",
						gender: "男",
						birth: '1990-09-01'
					},
					{
						name: "张启山",
						gender: "男",
						birth: '1990-09-01'
					},
					{
						name: "张启山",
						gender: "男",
						birth: '1990-09-01'
					},
					{
						name: "张启山",
						gender: "男",
						birth: '1990-09-01'
					},
					{
						name: "张启山",
						gender: "男",
						birth: '1990-09-01'
					},
					{
						name: "张启山",
						gender: "男",
						birth: '1990-09-01'
					},
					{
						name: "张启山",
						gender: "男",
						birth: '1990-09-01'
					},
					{
						name: "张启山",
						gender: "男",
						birth: '1990-09-01'
					}
				],
				completeLoadMoreStatus: 'more',
				// 已办任务列表
				completeList: [
					{
						name: "张启山",
						gender: "男",
						birth: '1990-09-01'
					},
					{
						name: "张启山",
						gender: "男",
						birth: '1990-09-01'
					}
				]
			}
		},
		onLoad(e) {
			let id = e.id; // 判断管理员审核的申请项目
			const res = uni.getSystemInfoSync();
			this.swiperHeight = res.windowHeight - uni.upx2px(80);
		},
		methods: {
			changeTab (e) {
				this.scrollInfo = 'tab' + e;
				this.tabIndex = e;
			},
			onChangeTab (e) {
				this.changeTab(e.detail.current);
			},
			openDetail(e) {
				uni.navigateTo({
					url: './task-detail'
				})
			},
			loadMoreTask() {
				this.needLoadMoreStatus = 'loading';
				setTimeout(() => {
					this.needLoadMoreStatus = 'more' 
				}, 2000)
			}
		}
	}
</script>

<style>
.tabbars {
	white-space: nowrap;
	width: 100%;
	border-bottom: solid #F5F5F4 1px;
}
.scroll-row {
	display: inline-block;
	padding: 0 30rpx 10rpx 30rpx;
}
.load-more {
	height: 188rpx;
	text-align: center;
	font-size: 30rpx;
	color: #BBBBBB;
	padding-top: 12rpx;
}
</style>